<template>
  <div ref="appRef" class="bigScreen">
    <div class="bg">
      <div class="header">
        <div class="time">
          <div class="dateDay white">{{ dateDay }}</div>
          <div class="dataOther">{{ dateYear }} {{ dateWeek }}</div>
        </div>
<!--        <div class="split"></div>-->
        <div class="weather">
<!--          <div class="weather_icon">-->
<!--            <svg class='svg-icon' aria-hidden='true'>-->
<!--              <use :xlink:href='"#icon-qing"'></use>-->
<!--            </svg>-->
<!--          </div>-->
<!--          <div class="weather_value">-->
<!--            <div class="temperature white">{{weather.temperature}}℃</div>-->
<!--            <div class="wind">{{weather.windDirection}}{{weather.windPower}}</div>-->
<!--          </div>-->
        </div>
        <div class="header_title">智慧城市网络预警与分析平台</div>
      </div>
      <div class="content">
        <LeftPane ref="leftPane" />
        <div class="middle">
          <threeMap />
        </div>
        <div class="right">
          <div class="right_top">
            <div class="right_top_title">
              <div class="card_title">工控安全告警及攻击事件统计</div>
            </div>
            <div class="right_top_content">
              <alarmAttack ref="alarmAttack"></alarmAttack>
            </div>
          </div>
          <div class="right_bottom">
            <div class="right_bottom_title">
              <div class="card_title">事件详情</div>
            </div>
            <div class="right_bottom_content">
              <eventDetail ref="eventDetail"></eventDetail>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import {formatTime} from "@/utils";
import alarmAttack from '@/views/components/alarm_attack'
import LeftPane from '@/views/components/LeftPane'
import eventDetail from '@/views/components/event_detail'
// import {getWeather} from "@/api/weather";
import threeMap from '@/components/echart/map/3dMap'

export default {
  mixins: [ drawMixin ],
  name: "index",
  components: {
    alarmAttack,
    LeftPane,
    eventDetail,
    threeMap
  },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      weather: {
        windDirection: '-', // 风向
        windPower: '-', // 风力
        temperature: '-', // 温度
        weatherIcon: '#icon-weizhi', // 图标
      },
      homeTimer: null,
    }
  },
  created() {
    let that = this;
    that.timeFn()
    // this.getWeather()
    this.$nextTick(() => {
      this.getHomeData();
    })
    that.homeTimer = setInterval(function (){
      that.getHomeData();
    },10000)
  },
  beforeDestroy() {
    clearInterval(this.homeTimer)
    clearInterval(this.timing)
  },

  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH:mm:ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    // getWeather(){
    //   getWeather().then(res => {
    //     this.weather = res;
    //   })
    // },
    getHomeData(){
      this.$refs.leftPane.getData();
      this.$refs.alarmAttack.getData();
      this.$refs.eventDetail.getData();
    }
  }
}
</script>
<style lang="scss">
@import '~@/assets/scss/bigScreen/bigScreen.scss';
</style>
